<template>
  <div class="text-xxl-center"></div>
  <CommonPage :show-header="false">
    <article class="margin-top-sm flex  flex-column flex-sub">
      <section style="display: flex;justify-content: space-between;margin-bottom: 10px">
        <div style="display: flex">
          <ArticleStatusSelect v-model:value="andParams.status"  @on-select="search"></ArticleStatusSelect>
          <SortSelect4 v-model:value="sortKey" @on-select="search"></SortSelect4>
        </div>
        <div style="display: flex">
          <SearchInput v-model:value="searchKey" @change="search" placeholder="ID" :loading="loading"></SearchInput>
        </div>
      </section>
      <section  style="overflow:hidden" class="flex flex-sub radius-lg bg-white  padding-tb-sm">
          <CurdTable ref="tableRef"
                     :get-data="api.article.queryList"
                     :columns="columns"
                     :and-params="andParams"
                     :or-params="orParams"
                     :order-params="orderParams">
          </CurdTable>
          <n-back-top :bottom="20"/>
      </section>
    </article>
  </CommonPage>
</template>

<script setup lang="ts">
import CommonPage from "@/components/page/CommonPage.vue";
import CurdTable from "@/components/common/table/CurdTable.vue";
import {h, onMounted, ref} from "vue";
import api from '@/api'
import SortSelect4 from "@/components/example/select/SortSelect4.vue";
import SearchInput from "@/components/common/input/SearchInput.vue";
import {NAvatar, NButton, NEllipsis, NText} from "naive-ui";
import {useClipboard} from "@vueuse/core";
import {getArticleStatus, getArticleStatusColor} from "@/utils";
import myMoment from "@/utils/common/myMoment";

import {imagePathPrefix} from "~/settings/common.json";
import {checkURL} from "@/utils/common/util";
import router from "@/router";
import ArticleStatusSelect from "@/components/example/select/ArticleStatusSelect.vue";


const {copy} = useClipboard()

/** QueryBar筛选参数（可选） */
const orParams = ref({
  id: '',
})
/** 补充参数（可选） */
const andParams = ref({
  status:'',
})
/** 排序参数(可选）*/
const orderParams = ref({
  createTime: '',
  commentCount:'',
  likeCount:'',
  viewCount:  '',
  hot:'',

})
const loading = ref()
const tableRef = ref()
const searchKey = ref('')
const sortKey = ref('2')



const columns = ref([
  {title: 'ID', key: 'id', width: 5, ellipsis: {tooltip: true}, align: 'center',},
  {
    title: '封面', key: 'avatarUrl', width: 6, ellipsis: {tooltip: true}, align: 'center',
    render(row: any) {
      return h(NAvatar, {
        size: 80,
        src: checkURL(row.coverImage) && row.coverImage || imagePathPrefix + row.coverImage,
      })
    }
  },
  {
    title: '标题', key: 'title', width: 5, ellipsis: {tooltip: true}, align: 'center',
    render(row: any) {
      return h(NText, {style: {fontSize: '14px'}}, {default: () => row.title})
    }
  },
  {
    title: '分类', key: 'type', width: 5, ellipsis: {tooltip: true}, align: 'center',
    render(row: any) {
      return h(NText, {style: {fontSize: '14px'}}, {default: () => row.type})
    }
  },
  {
    title: '热度', key: 'hot', width: 3, ellipsis: {tooltip: true}, align: 'center',
    render(row: any) {
      return h(NText, {style: {fontSize: '14px'}}, {default: () => row.hot})
    }
  },
  {
    title: '浏览', key: 'viewCount', width: 3, ellipsis: {tooltip: true}, align: 'center',
    render(row: any) {
      return h(NText, {style: {fontSize: '14px'}}, {default: () => row.viewCount})
    }
  },
  {
    title: '点赞', key: 'likeCount', width: 3, ellipsis: {tooltip: true}, align: 'center',
    render(row: any) {
      return h(NText, {style: {fontSize: '14px'}}, {default: () => row.likeCount})
    }
  },
  {
    title: '评论', key: 'commentCount', width: 3, ellipsis: {tooltip: true}, align: 'center',
    render(row: any) {
      return h(NText, {style: {fontSize: '14px'}}, {default: () => row.commentCount})
    }
  },
  {
    title: '创建时间', key: 'createTime', width: 8, ellipsis: {tooltip: true}, align: 'center',
    render(row: { [x: string]: any; }) {
      return h("div", {}, [
        h("div", {style: {fontSize: '14px'}}, [h(NEllipsis, {}, {default: () => myMoment(row?.createTime).format("MMMDo H:mm")})]),
        h(NText, {depth: '3'}, {default: () => myMoment(row?.createTime).startOf('minute').fromNow()}),
      ])
    }
  },
  {
    title: '状态', key: 'status', width: 5, ellipsis: {tooltip: true}, align: 'center',
    render(row: any) {
      return h(NText, {
        style: {
          fontSize: '14px',
          color: getArticleStatusColor(row.status)
        }
      }, {default: () => getArticleStatus(row.status)})
    }
  },
  {
    title: '操作', key: 'actions', width: 8, align: 'center',
    render(row: any) {
      return [
        h(NButton, {
          round: true,
          secondary: true,
          size: 'small',
          type: "info",
          onClick: () => handleExamine(row)
        }, {default: () => "审核"}),
        h(NButton, {
          round: true,
          secondary: true,
          size: 'small',
          type: "error",
          onClick: () => handleDelete(row)
        }, {default: () => "删除"}),
      ]
    }
  }
])

onMounted(() => {
  search()
})

const search = async () => {
  loading.value = true
  Object.keys(orParams.value).forEach((key: any) => {
    //@ts-ignore
      orParams.value[key] = `%${searchKey.value}%`
  })
  if (sortKey.value === '11') {
    orderParams.value.createTime = '1'
  } else if (sortKey.value === '12') {
    orderParams.value.createTime = '2'
  } else   if (sortKey.value === '21') {
    orderParams.value.hot = '1'
  } else if (sortKey.value === '22') {
    orderParams.value.hot = '2'
  } else   if (sortKey.value === '31') {
    orderParams.value.viewCount = '1'
  } else if (sortKey.value === '32') {
    orderParams.value.viewCount = '2'
  } else   if (sortKey.value === '41') {
    orderParams.value.likeCount = '1'
  } else if (sortKey.value === '42') {
    orderParams.value.likeCount = '2'
  } else   if (sortKey.value === '51') {
    orderParams.value.commentCount = '1'
  } else if (sortKey.value === '52') {
    orderParams.value.commentCount = '2'
  }else {
    orderParams.value.createTime = ''
    orderParams.value.commentCount = ''
    orderParams.value.likeCount = ''
    orderParams.value.hot = ''
    orderParams.value.viewCount = ''
  }
  await tableRef.value.handleSearch()
  loading.value = false
}




const handleExamine = (row: any) => {
  if (row.status === 0) {
    window.$message.warning('内容仍在编辑中，暂不可审核')
  } else {
    router.push({
      path: '/article/examine',
      query: {
        articleInfo: encodeURIComponent(JSON.stringify(row))
      }
    })
  }
}
const handleDelete = (row: any) => {
  window.$dialog.warning({
    title: '确定要删除此文章吗？',
    positiveText: '确定',
    negativeText: '取消',
    onPositiveClick: () => {
      api.article.remove({
       id:row.id
      }).then(res => {
        if (res && res.data.code === 0) {
          window.$message.warning(res.data.msg)
        }
      })
    }
  })
}



</script>

<style scoped>

</style>